import React from 'react';
import { useHistory } from 'react-router-dom';
import { ArrowUpOutlined, ArrowDownOutlined, RightOutlined } from '@ant-design/icons';

interface Props {
  data: any;
  path: string;
  time: string;
}

const arrow = {
  increase: <ArrowUpOutlined />,
  decrease: <ArrowDownOutlined />,
};

const OneBottom: React.FC<Props> = ({ data, path, time }) => {
  const history = useHistory();

  return (
    <div className="single-comparison">
      <div className="single-comparison-left">
        <span>自从上{time}以来</span>
        <div className={`comparison-icon ${data.monthOnMonth}`}>{arrow[data.monthOnMonth]}</div>
        <span>{data.monthOnMonthPercentage}%</span>
      </div>
      <RightOutlined className="single-comparison-right" onClick={() => history.push(path)} />
    </div>
  );
};

export default OneBottom;
